<template>
  <div id="app">

    <!-- 新增表单 -->
    <el-dialog center title="商品备案" :visible.sync="addFormView">
      <el-form label-position="left" label-width="80px" :model="add">
        <el-form-item  label="商品图片" >
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8081/alioss/upload"
          :headers="tokenObj"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="add.goodsImg" :src="add.goodsImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-form-item>
        <el-form-item  label="商品名称" >
          <el-input v-model="add.goodsName" placeholder="商品名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  label="商品价格" >
          <el-input v-model="add.goodsPrice" placeholder="商品价格" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  label="商品单位" >
          <el-input v-model="add.goodsUnit" placeholder="商品单位" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地区">
          <el-cascader
            size="medium"
            :options="pcaTextArr"
            v-model="add.goodsAddress">
          </el-cascader>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input type="textarea" v-model.trim="add.goodsDesc" placeholder="商品描述" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormView = false">取 消</el-button>
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改表单 -->
    <el-dialog center title="修改商品备案" :visible.sync="updateFormView">
      <el-form label-position="left" label-width="80px" :model="update">
        <el-form-item  label="商品图片" >
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8081/alioss/upload"
          :headers="tokenObj"
          :show-file-list="false"
          :on-success="handleAvatarSuccess1"
          :before-upload="beforeAvatarUpload">
          <img v-if="update.goodsImg" :src="update.goodsImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-form-item>
        <el-form-item  label="商品名称" >
          <el-input v-model="update.goodsName" placeholder="商品名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  label="商品价格" >
          <el-input v-model="update.goodsPrice" placeholder="商品价格" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  label="商品单位" >
          <el-input v-model="update.goodsUnit" placeholder="商品单位" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地区">
          <el-input v-model="update.goodsAddress" placeholder="商品单位" autocomplete="off" :readonly="true" ></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input type="textarea" v-model.trim="update.goodsDesc" placeholder="商品描述" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFormView = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdateForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 搜索框 -->
    <el-card class="box-card" shadow="always">
      <el-input
        placeholder="商品编码"
        v-model="selectGoods.goodsCode"
        size="medium">
      </el-input>
      <el-input
        placeholder="商品名"
        v-model="selectGoods.goodsName"
        size="medium">
      </el-input>
      <el-input
        placeholder="商品价格"
        v-model="selectGoods.goodsPrice"
        size="medium">
      </el-input>
      <el-input
        placeholder="商品描述"
        v-model="selectGoods.goodsDesc"
        size="medium">
      </el-input>
      <!-- <el-input
        placeholder="商品单位"
        v-model="selectGoods.goodsUnit"
        size="medium">
      </el-input> -->
      <el-cascader
            placeholder="产地"
            size="medium"
            :options="pcaTextArr"
            v-model="selectGoods.goodsAddress">
      </el-cascader>&nbsp;
      <el-button type="info" size="medium" @click="handelSelect" plain>查询</el-button>
      <el-button type="warning" size="medium" @click="handelRecet" plain>重置</el-button>
    </el-card>
    <el-card class="box-card" shadow="always">
      <el-button type="primary" size="medium" @click="addFormView = true" plain>商品备案</el-button>
    </el-card>

    <!-- 表格以及分页 -->
    <el-card shadow="always">
       <el-table
        :data="tableData"
        style="width: 100%"
        height="415">
          <!-- <el-table-column
            label="商品编号"
            width="180"
            prop="goodsCode">
          </el-table-column> -->
          <el-table-column
            label="商品名"
            width="100"
            prop="goodsName">
          </el-table-column>
          <el-table-column
            label="图片"
            width="100"
            align="center">
            <template slot-scope="scope">
               <el-image
                :src="scope.row.goodsImg"
                fit="cover">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            label="价格"
            width="100"
            align="center"
            prop="goodsPrice">
          </el-table-column>
          <el-table-column
            label="单位"
            width="100"
            align="center"
            prop="goodsUnit">
          </el-table-column>
          <el-table-column
            label="产地"
            prop="goodsAddress">
          </el-table-column>
          <el-table-column
            label="描述"
            prop="goodsDesc">
          </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑
            </el-button>&nbsp;
            <el-button
              type="danger"
              size="mini"
              slot="reference"
              @click="handelDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

    </el-card>
  </div>

</template>
<script>
import instance from '@/utils/request'
import { insertGoods, updateGoods, deleteGoodsById } from '@/api/goods'
import { Message, MessageBox } from 'element-ui'
import { pcaTextArr } from 'element-china-area-data'
export default {
  name: 'HistoryPage',
  data () {
    return {
      imageUrl: '',
      add: {
        goodsName: '',
        goodsAddress: [],
        goodsDesc: '',
        goodsPrice: '',
        goodsUnit: '',
        goodsImg: ''
      },
      update: {
        id: '',
        goodsName: '',
        goodsAddress: '',
        goodsDesc: '',
        goodsPrice: '',
        goodsUnit: '',
        goodsImg: ''
      },
      selectGoods: {
        goodsCode: '',
        goodsName: '',
        goodsAddress: [],
        goodsDesc: '',
        goodsPrice: '',
        goodsUnit: ''
      },
      updateFormView: false, // 修改表单显示
      addFormView: false, // 新增表单显示
      input1: '',
      input2: '',
      currentPage: 1, // 当前页
      pageSize: 5,
      total: 1,
      tableData: [],
      // 地区相关
      // 地区引入
      pcaTextArr,
      selectedOptions: [],
      tokenObj: {
        token: ''
      }
    }
  },

  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getGoodsList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getGoodsList()
    },
    handleEdit (row) {
      this.updateFormView = true
      this.update = row
    },
    handelSelect () {
      this.getGoodsList()
    },
    handelRecet () {
      this.selectGoods = {
        goodsCode: '',
        goodsName: '',
        goodsAddress: [],
        goodsDesc: '',
        goodsPrice: '',
        goodsUnit: ''
      }
      this.getGoodsList()
    },
    handelAllDelete () {
      console.log('批量删除')
    },
    async handelDelete (row) {
      MessageBox.confirm('删除该条商品信息将会影响库存/采购订单/销售订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteGoodsById(row.id)
        Message({
          type: 'success',
          message: '删除成功!'
        })
      })
      await this.getGoodsList()
    },
    // 提价新增表单
    async submitAddForm () {
      this.addFormView = false
      console.log(this.add.goodsAddress)
      const res = await insertGoods(this.add)
      Message.success(res.data)
      this.add = {
        goodsName: '',
        goodsAddress: '',
        goodsDesc: '',
        goodsPrice: '',
        goodsUnit: '',
        goodsImg: ''
      }
      this.getGoodsList()
    },
    async submitUpdateForm () {
      this.updateFormView = false
      console.log(this.update)
      const res = await updateGoods(this.update)
      Message.success(res.data)
      this.getGoodsList()
    },
    // 图片上传
    handleAvatarSuccess (res, file) {
      Message.success('上传图片成功!')
      this.add.goodsImg = res.data
    },
    handleAvatarSuccess1 (res, file) {
      Message.success('上传图片成功!')
      this.update.goodsImg = res.data
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        Message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        Message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    // 渲染表格
    async getGoodsList () {
      const res = await instance.post(`/goods/list/${this.currentPage}/${this.pageSize}`, this.selectGoods)
      this.tableData = res.data.list
      this.total = res.data.total
    }

  },

  created () {
    // 图片需要
    this.tokenObj.token = this.$store.getters.token.trim()
    // 渲染表格
    this.getGoodsList()
  }

}
</script>

<style scoped>
.box-card{
  margin-bottom: 5px;
}
.el-input{
  width: 200px;
  margin-right: 5px;
}
.el-card ::v-deep .el-card__body {
  padding: 10px;
}
.el-pagination {
  padding: 15px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
